<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>地图分屏</title>


    <!--<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">-->
    <!--<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">-->
    <!--<script src="http://js.arcgis.com/3.8/"></script>-->
    <link rel="stylesheet" href="/javascripts/arcgis_js_api/library/3.16/3.16/esri/css/esri.css">
    <link rel="stylesheet" href="/javascripts/arcgis_js_api/library/3.16/3.16/dijit/themes/claro/claro.css">
    <script src="/javascripts/arcgis_js_api/library/3.16/3.16/init.js"></script>
    <link rel="stylesheet" href="style.css">
    <script>
//        window.onresize=function(){
//            location.reload();
//        };
        var mapLeft,mapRight,timer;

        require([
                    "dojo/ready",
                    "dojo/parser",
                    "dijit/layout/BorderContainer",
                    "dijit/layout/ContentPane",
                    "esri/map",
                    "esri/geometry/Extent",
                    "esri/layers/ArcGISTiledMapServiceLayer",
                    "dojo/domReady!"
                ],
        function init(ready,parser,BorderContainer, ContentPane,Map,Extent,ArcGISTiledMapServiceLayer) {
            parser.parse();
            mapLeft = new Map("mapLeft", {
                basemap:"topo",
                extent: new Extent({xmin:105,ymin:21,xmax:110,ymax:40,
                                    spatialReference:{wkid:4326}
                                    }),
                slider:false,
                logo:false,
                zoom:5,
                autoResize:true
        });
            mapRight = new Map("mapRight", {
                basemap:"topo",
                extent: new Extent({xmin:105,ymin:21,xmax:110,ymax:40,
                                    spatialReference:{wkid:4326}
                                    }),
                slider:false,
                logo:false,
                zoom:5,
                autoResize:true
            });
                var tiledLeft= new ArcGISTiledMapServiceLayer("http://192.168.1.157:8399/arcgis/rest/services/changjiang/basin/MapServer");
                var tiledRight= new ArcGISTiledMapServiceLayer("http://192.168.1.157:8399/arcgis/rest/services/changjiang/basin/MapServer");
                mapLeft.addLayer(tiledLeft);
                mapRight.addLayer(tiledRight);


            var flagL=true,flagR=true;
            mapLeft.on("extent-change",function(){
                if(flagL){
                    var lExtent=mapLeft.extent;
                    mapRight.setExtent(lExtent);
//                    mapRight.resize();
                    flagR=false;
                }else if(!flagL){
                    flagL=true;
                }
            });
            mapRight.on("extent-change",function(){
                if(flagR){
                    var rExtent=mapRight.extent;
                    mapLeft.setExtent(rExtent);
//                    mapLeft.resize();
                    flagL=false;
                }else if(!flagR){
                    flagR=true;
                }
            });
//            dojo.connect(window,'onLoad',function(){
//                dojo.connect(document.getElementById('mapLeft'), 'onResize',reSize);
//                dojo.connect(document.getElementById('mapRight'),'onResize',reSize);
//            })
//            function reSize(){
//
//                    mapLeft.resize(100,100);
//                    mapLeft.reposition();
//                    mapRight.resize(100,100);
//                    mapRight.reposition();
//                }


            })

    </script>
</head>

<body class="claro">
<div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'"
     style="width:100%; height:100%;">
    <div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
        <div id="title">天地图      <span>地图联动</span></div>
        <div id="snippet">
        </div>
    </div>

    <div id="mapLeft" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'">
    </div>
    <div id="mapRight" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
    </div>

</div>
</body>
</html>